<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl"
    src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
// require.config({
// paths : {
// echarts : '../resource/js/dist'
// }
// }); //require.config配置完成就可以动态加载echarts
// require(
// [ 'echarts', 'echarts/chart/line'],
// callBack //回调函数
// );

var myChart;
            var option;

            function callBack(ec) {
// myChart = ec.init(document.getElementById('main'));//初始化接口，返回EChart实例  (macarons /infographic/helianthus .. 为主题参数)
// 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                window.onresize = myChart.resize;
                myChart.showLoading();
                option = {
                    title: {
                        text: '风机测点历史数据曲线回放', //标题文本 '\n'为换行
                        x: "center",
                        y: "top"
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: { //图例
                        show: true,
                        data: [],//图例内容数组，数组项通常为{string}，每一项代表一个系列的name
                        x: 'center',
                        y: '40'
                    },
                    toolbox: { //工具栏
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            dataZoom: {show: true},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: [{
                        name: '历史时间',
                        type: 'category', //横轴类型 有'category'类目型，'value'数值型，'time'时间型
                        boundaryGap: false,
                        data: [],
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    yAxis: [{
                        name: '历史数值',
                        type: 'value',//坐标轴文本标签
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    dataZoom: { //数据区域缩放，仅对直角坐标系图表有效
                        show: true, //是否显示，当show为true时则接管使用指定类目轴的全部系列数据，如不指定则接管全部直角坐标系数据
                        realtime: true, //缩放变化是否实时显示。
                        start: 0, //选择起始比例，默认为0%；从第一个数据开始，
                        end: 100
//选择结束比例，默认为100%；到最后一个数据，
                    },
                    series: []
                };
                var chk_value = [];
                $('input[name="eq_ck"]:checked').each(function () {//遍历每一个复选框，其中选中的执行函数
                    chk_value.push($(this).val());//将选中的值添加到数组chk_value中
                });
                var url = "equipmentHistorysAjax.action?theDay="
                    + $("#theDay").val() + "&endDay="
                    + $("#endDay").val() + "&eqs=" + chk_value
                    + "&def=" + $("#def").val() + "&rate="
                    + $("#rate").val();
                var sArr = [];
                var legendArr = [];
                var timeArr = [];
                $.ajax({
                    url: url,
                    type: "post",
                    async: false,//同步执行
                    cache: false,
                    dataType: "json",
                    iModified: true,
                    success: function (result) {
                        if (result) {
                            for (i = 0; i < result.length; i++) {
                                if (null != result[i] && typeof (result[i].code) != 'undefined') {
                                    legendArr.push(result[i].code);
                                    var valueArr = [];
                                }
                                if (null != result[i] && typeof (result[i].list) != 'undefined' && null != result[i].list) {
                                    timeArr.length = 0;
                                    for (j = 0; j < result[i].list.length; j++) {
                                        if (result[i].list[j] != null) {
                                            timeArr.push(format(result[i].list[j].time, "yyyy-MM-dd HH:mm:ss"));
                                            valueArr.push(result[i].list[j].value);
                                        }
                                    }
                                }
                                if (null != result[i] && typeof (result[i].code) != 'undefined' && typeof (result[i].list) != 'undefined') {
                                    sArr.push(valueArr);
                                }
                            }
                        }
                    },
                    error: function (errorMsg) {
                        alert("请求数据失败");
                    }
                });
                option.legend.data = legendArr;
                option.xAxis[0].data = timeArr;
                for (i = 0; i < sArr.length; i++) {
                    var item = {
                        name: legendArr[i],
                        type: 'line',
                        data: sArr[i],
                        smooth: true,//平滑曲线显示
                        legendHoverLink: true,//是否启用图例（legend）hover时的联动响应（高亮显示
                        markPoint: {//最大最小值标记
                            data: [{
                                type: 'max',
                                name: '最大值'
                            }, {
                                type: 'min',
                                name: '最小值'
                            }]
                        },
                        markLine: {//平均线
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }]
                        }
                    }
                    option.series.push(item);
                }
                ;
                clearTimeout(loadingTicket);
                var loadingTicket = setTimeout(function () {
                    myChart.hideLoading();
                    myChart.setOption(option);
                }, 1000);
            }

            callBack();
    </script>
</body>
</html>